<template>
  <div id="app">
    <div class="content-container">
      <div class="image-container">
        <!--        <img src="@/assets/img/publicBrand/绘制数字农业产业园图 (1).png" alt="Image 1" class="image" />-->
        <img :src="imageUrls[0]" alt="铅山古镇" class="left-image" />
        <img :src="imageUrls[1]" alt="生成特定主题的图片" class="left-image" />
      </div>

      <DynamicFlowEconomyComponent
          :title="'聚力打造铅山文化品牌'"
          :content="[
'围绕铅山历史文化名城，做好书院文化、古镇文化、茶文化、红色文化、连四纸文化等的保护和开发，深挖铅山鹅湖书院、河口古镇等文化资源，打造文化产业数智平台，发挥大数据文化产业的核心作用，以强烈的文化自信大力推进“文化铅山”建设。拓展铅山县域“古镇”“古街”“古村” 文旅产业，打造世界知名文化旅游板块。引入具有国际渠道和有能力的龙头企业，实行“投建管运”一体化。 建立“大文旅”统筹机制：设立文旅委或专班，统筹规划、土地、投融资、市场监管、品牌营销，破解“多头管理”痛点。持续举办具有国际影响力的文化节、体育赛事、博览会，形成“季季有主题、月月有热度”。把河口明清古街打造成为全县文化旅游的龙头，将分散在县城周边的鹅湖书院、葛仙村、信江阁等旅游景点和资源串联起来，串珠成线、以线带面，以此来整体推动提升全域旅游品质。'
      ]"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import DynamicFlowEconomyComponent from "@/views/regionalPublicBrand/DynamicFlowEconomyComponent.vue";

// 定义图片URL数组
const imageUrls = [
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E9%93%85%E5%B1%B1%E5%8F%A4%E9%95%87.png',
  'https://fzs-yanshan.oss-cn-beijing.aliyuncs.com/region-produce/%E7%94%9F%E6%88%90%E7%89%B9%E5%AE%9A%E4%B8%BB%E9%A2%98%E7%9A%84%E5%9B%BE%E7%89%87.png'
];

// 预加载图片函数
const preloadImages = () => {
  imageUrls.forEach((url, index) => {
    const img = new Image();
    img.src = url;
    const altText = index === 0 ? '铅山古镇' : '生成特定主题的图片';
    img.onload = () => {
      console.log(`图片预加载成功: ${altText}`);
    };
    img.onerror = (error) => {
      console.error(`图片预加载失败: ${altText}`, error);
    };
  });
};

// 在组件挂载前预加载图片
onMounted(() => {
  preloadImages();
});
</script>

<style scoped>
.content-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-start;
}

.left-image {
  width: 500px; /* 根据需要调整图片宽度 */
  margin-right: 20px; /* 图片与文本之间的间距 */
  margin-bottom: 40px;
}

#app {
  padding: 20px; /* 页面内边距 */
}

.content p {
  line-height: 1.6;
}
</style>
